<template>
  <div class="container cc">
    <Header>
      <router-link to='/order/0' tag='i' class="iconfont icon-jiantou1" slot='left'></router-link>
      确认订单
    </Header>
    <div class="box">
      <div class="top">
        <div>收货人：{{ name }}</div>
        <router-link to='/address' tag='div'>收货地址：{{ address }}</router-link>
      </div>
      <div class="mmm">
        <ul class="main">
          <li v-for="i of pro" :key="i.pro.proid">
            <img :src="i.pro.proimg" alt="加载失败">
            <div>
              <h5>{{ i.pro.proname}}</h5>
              <span>￥{{ i.pro.bigp || i.pro.middlep }}</span>
            </div>
            <p>×{{ i.num }}</p>
          </li>
          <li class="mb">
            共<span>{{ count }}</span>件，总计<span>{{ wall }}</span>元
          </li>
        </ul>
      </div>
      <ul class="bottom">
        <li>
          配送方式<span>包邮</span>
        </li>
        <li>
          会员折扣价<span>九折</span>
        </li>
        <router-link to='/couponx' tag='li'>
          优惠券<span>{{ coupon }}</span>
        </router-link>
        <li>
          积分抵扣<span>总积分：{{ inteAll }}</span>
        </li>
        <li>
          请输入积分数额：<input type="text" @blur="pd" v-model="inte" placeholder="<= 1000积分">
        </li>
      </ul>
      <div class="zb">
        <p>共计<span>{{ all }}</span>元</p>
        <div @click="fukuan">去付款</div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/header.vue'
import { Toast } from 'vant'
import axios from '@/utils/request'
export default {
  data () {
    return {
      inte: '',
      inteAll: 0,
      coupon: 0,
      couponc: '',
      name: '',
      address: '',
      userid: localStorage.userid,
      token: localStorage.token,
      wall: 0,
      all: 0,
      cmoney: 0,
      count: 0,
      pro: ''
    }
  },
  components: {
    Header
  },
  methods: {
    pd () {
      if (this.inte % 100 !== 0) {
        Toast('必须是100的倍数')
        this.inte = 0
      }
      this.all = (this.all - this.inte / 100).toFixed(2)
    },
    fukuan () {
      sessionStorage.price = this.all
      sessionStorage.inte = this.inte
      this.$router.push('/paymethods')
    }
  },
  created () {
    axios.get('/users/address?userid=' + this.userid).then(res => {
      if (localStorage.address) {
        this.name = JSON.parse(localStorage.address).name
        this.address = JSON.parse(localStorage.address).address
      } else {
        res.data.data.map(i => {
          if (i.isDefault) {
            this.name = i.name
            this.address = i.address
          }
        })
      }
    })
    axios.get('/integral?userid=' + this.userid).then(res => {
      if (res.data.code !== '12306') {
        this.inteAll = res.data.sum
      }
    })
    var orderid = sessionStorage.orderid
    var userid = localStorage.userid
    var p1 = new Promise((resolve, reject) => {
      axios.get('/order?orderid=' + orderid + '&userid=' + userid).then(res => {
        if (res.data.code !== '25580') {
          var n = []
          var pro = []
          var num = res.data.data[0].num
          // console.log(res.data.data)
          for (let i = 0; i < res.data.data[0].proid.length; i++) {
            n[i] = new Promise((resolve, reject) => {
              axios.get('/pro/detail?proid=' + res.data.data[0].proid[i]).then(res => {
                pro.push({
                  pro: res.data[0],
                  num: num[i]
                })
                this.count = num[i]
                this.wall += (res.data[0].bigp || res.data[0].middlep) * num[i]
                resolve()
              })
            })
          }
          Promise.all(n).then(() => {
            this.pro = pro
            this.all = (0.9 * this.wall).toFixed(2)
            resolve()
            // console.log(pro)
          })
        }
      })
    })
    var len
    var p2 = new Promise((resolve, reject) => {
      axios.get('/coupon?userid=' + this.userid).then(res => {
        if (res.data.code !== '11010') {
          if (sessionStorage.couponid) {
            res.data.data.map(i => {
              if (i.couponid === sessionStorage.couponid) {
                this.coupon = i.name
                this.couponc = i.condition
                resolve()
              }
            })
          } else {
            len = res.data.len
            this.coupon = res.data.len
          }
        }
      })
    })
    Promise.all([p1, p2]).then(() => {
      if (sessionStorage.couponid) {
        if (this.couponc.length === 1) {
          if (this.all > this.couponc[0] * 1) {
            this.all = (this.all - this.couponc[0]).toFixed(2)
          } else {
            sessionStorage.couponid = ''
            this.coupon = len
            Toast('优惠券使用条件不满足')
          }
        } else {
          if (this.all > this.couponc[0] * 1) {
            this.all = (this.all - this.couponc[1]).toFixed(2)
          } else {
            sessionStorage.couponid = ''
            this.coupon = len
            Toast('优惠券使用条件不满足')
          }
        }
      }
    })
  },
  watch: {
    inte: {
      handler (newVal) {
        if (newVal > 1000) {
          Toast('一次只能使用1000积分')
          this.inte = 1000
        }
        if (newVal > this.inteAll) {
          Toast('不能大于总积分')
          this.inte = 0
        }
      },
      immediate: true,
      deep: true
    },
    all (newVal) {
      if (newVal < 0) {
        this.all = 0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/lib/reset.scss";
header {
  @include flexbox();
  @include justify-content(space-between);
}
.cc {
  @include background-color(#eee);
  .box {
    @include rect(100%,auto);
    .top {
      @include rect(100%,auto);
      @include flexbox();
      @include flex-direction(column);
      @include align-items();
      @include background-color(#fff);
      div {
        @include rect(94%,0.4rem);
        @include line-height(0.4rem);
        @include font-size(18px);
      }
      div:nth-child(2) {
        @include font-size(14px);
      }
    }
    .mmm {
      width: 100%;
      max-height: 2.6rem;
      @include overflow();
      .main {
        @include rect(100%,auto);
        @include flexbox();
        @include flex-direction(column);
        @include align-items();
        @include margin(0.06rem 0 0.1rem);
        li {
          @include margin(0.04rem 0 0);
          @include background-color(#fff);
          @include rect(96%,0.8rem);
          @include flexbox();
          @include border(0 0 1px 0,#ddd,solid);
          @include padding(0.06rem 0.06rem 0);
          img {
            @include rect(0.8rem,0.7rem);
            @include border(1px,#ddd,solid);
            @include margin(0 0.1rem 0 0);
          }
          div {
            @include rect(62%,0.7rem);
            h5 {
              @include font-size(16px);
              @include line-height(0.36rem);
            }
            span {
              @include font-size(14px);
              @include color(#c11);
            }
          }
          p {
            @include font-size(17px);
            @include padding(0.2rem 0);
          }
        }
        .mb {
          @include font-size(16px);
          @include padding(0 0.1rem);
          @include line-height(0.42rem);
          @include rect(96%,0.42rem);
          @include margin(0.06rem 0 0);
          @include flexbox();
          @include justify-content(flex-end);
          span {
            @include margin(0 0.04rem);
            @include font-size(18px);
            @include color(#f66);
          }
        }
      }
    }
    .bottom {
      @include rect(100%,auto);
      @include background-color(#fff);
      @include flexbox();
      @include flex-direction(column);
      @include align-items();
      li {
        @include rect(96%,0.4rem);
        @include border(0 0 1px 0,#ddd,solid);
        @include flexbox();
        @include justify-content(space-between);
        @include line-height(0.4rem);
        @include padding(0 0.16rem);
        span {
          @include font-size(16px);
          @include color(red);
        }
        input {
          @include rect(42%,70%);
          @include margin(0.06rem 0 0);
          border: none;
          border-bottom:1px #ddd solid;
          padding-left: 0.1rem;
        }
      }
    }
    .zb {
      @include rect(100%,0.6rem);
      @include flexbox();
      @include justify-content(flex-end);
      @include background-color(#fff);
      @include line-height(0.6rem);
      @include font-size(16px);
      position: fixed;
      z-index: 10;
      bottom: 0;
      span {
        @include font-size(20px);
        @include color(red);
        @include margin(0 0.06rem);
      }
      div {
        @include rect(30%,100%);
        @include background-color(#d11);
        @include color(#fff);
        @include text-align();
        @include margin(0 0 0 0.2rem);
        @include font-size(18px);
      }
    }
  }
}
</style>
